<div id="ad_manager">
    <div class="ad_manager">
        <el-row class="table_search">
            <el-col :span="20">
                <template>
                    <el-input v-model="keywords"
                              placeholder="广告编号/广告名称"
                              :clearable="true"
                              prefix-icon="el-icon-search">
                    </el-input>
                    <el-select v-model="queryAdType" placeholder="请选择广告类型" :clearable="true">
                        <el-option value="0" label="普通广告" ></el-option>
                        <el-option value="1" label="WEB广告" ></el-option>
                    </el-select>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>

            <el-col :span="4" class="text-r">
                <el-button type="primary" icon="el-icon-plus" @click="edit()">新增广告</el-button>
            </el-col>
        </el-row>

        <template>
                <el-table
                    size="mini"
                    @row-click='handleRowHandle'
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="adId"
                        label="广告序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="adName"
                        label="广告名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="100"
                        prop="adType"
                        label="广告类型">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="200"
                        prop="adLink"
                        label="广告URL">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="250"
                        prop="adDesc"
                        label="描述">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="150"
                        prop="status"
                        label="状态"
                        :filters="[{ text: '0', value: false }, { text: '1', value: true }]"
                        :filter-method="filterAdType">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                @change="changeAdType(scope.$index, scope.row)"
                                active-text="可用"
                                inactive-text="禁用"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope"><!---->
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block footerBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form
                class="add-template-form"
                :rules="adRules"
                ref="form"
                :model="form"
                label-width="200px">
            <el-form-item label="广告序号：" prop="adId">
                <el-input v-model="form.adId" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="广告名称：" prop="adName">
                <el-input v-model="form.adName"></el-input>
            </el-form-item>
            <el-form-item label="广告链接：" prop="adLink">
                <el-input v-model="form.adLink"></el-input>
            </el-form-item>
            <el-form-item label="广告图片：" prop="adFilePath">
                <el-input v-model="form.adFilePath" :disabled="true" style="width:350px;"></el-input>
                <el-upload
                        class="upload-demo"
                        action="${basePath}bank/ad/upload"
                        name="file_upload"
                        accept="jpg,png"
                        :on-success='upScuccess'
                        :on-remove="handleRemove"
                        :file-list="form.fileList"
                        :limit="1"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="广告类型：" prop="adType">
                <el-select v-model="form.adType" placeholder="请选择">
                    <el-option value="0" label="普通广告" ></el-option>
                    <el-option value="1" label="WEB广告" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="广告状态：" prop="status">
                <el-switch
                    v-model="form.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="可用"
                    inactive-text="禁用">
            </el-switch>
            </el-form-item>
            <el-form-item label="广告描述：" prop="adDesc">
                <el-input type="textarea" v-model="form.adDesc"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="广告详情" :visible.sync="dialogInfoVisible" class="dialogDetails">
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告序号</el-col>
                <el-col :span="15" style="color: #333">{{bean.adId}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告名称</el-col>
                <el-col :span="15" style="color: #333">{{bean.adName}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告描述</el-col>
                <el-col :span="15" style="color: #333">{{bean.adDesc}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告类型</el-col>
                <el-col :span="15" style="color: #333">{{bean.adType}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告链接</el-col>
                <el-col :span="15" style="color: #333">{{bean.adLink}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">状态</el-col>
                <el-col :span="15" style="color: #333">{{bean.status?'启用':'停用'}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">创建人</el-col>
                <el-col :span="15" style="color: #333">{{bean.creator}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">创建时间</el-col>
                <el-col :span="15" style="color: #333">{{bean.createDate}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">更新人</el-col>
                <el-col :span="15" style="color: #333">{{bean.updator}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">更新时间</el-col>
                <el-col :span="15" style="color: #333">{{bean.updateDate}}</el-col>
            </el-row>
        </div>
    </el-dialog>
</div>

<!--[if IE]>
<script>
	goIEPage(IEVersion(),'${basePath}/ad_list_IE');
</script>
<![endif]-->

<!--[if !IE]><!-->
<script>
    var ad;
    ad = new Vue({
        el: "#ad_manager",
        data: {
            dialogFormVisible: false,
            dialogTitle: '',
            dialogInfoVisible: false,//查看详情
            bean: {},//查看详情
            form: {
                adId:'',
                adName: '',
                adLink: '',
                adFilePath: '',
                adType: '',
                status: true,
                adDesc: '',
                fileList: []
            },
            adRules: {
                adName: [
                    {required: true, message: '请填写广告名称', trigger: 'blur'},
                    { max: 200, message: '长度在 200 个字符以内', trigger: 'blur' }
                ],
                adType: [
                    {required: true, message: '请选择广告类型', trigger: 'change'}
                ],
                adFilePath: [
                    {required: true, message: '请选择广告图片', trigger: 'change'}
                ]
            },
            keywords: '',
            queryAdType: '',
            tableData: [],
            totalCount: '',
            totalPage: '',
            currentPage: 1,
            pageSize: 10
        },
        methods: {
            submitForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var url = "${basePath}bank/ad/save";
                        var option = {
                            'adId':ad.form.adId,
                            'adName': ad.form.adName,
                            'adLink': ad.form.adLink,
                            'adFilePath': ad.form.adFilePath,
                            'adType': ad.form.adType,
                            'status': ad.form.status ? '1' : '0',
                            'adDesc': ad.form.adDesc,
                        };
                        sendService(url, option, function (resData) {
                                console.log(option);
                            if (resData.status == 'success') {
                                ad.goPage("/bank/ad");
                                ad.$message.success(resData.msg);
                            } else {
                                ad.$message.error(resData.msg);
                            }
                        });
                    } else {
                        ad.$message.error("表单验证失败，请检查");
                        return false;
                    }
                });
            },
            handleCurrentChange: function (currentPage) {
                ad.currentPage = currentPage;
                ad.searchFun();
            },
            searchFun: function () {
                var options = {
                    'currentPage': ad.currentPage,
                    'keywords': ad.keywords,
                    'queryAdType': ad.queryAdType
                };
                var url = '${basePath}bank/ad/getAdlist';
                sendService(url, options, function (resData) {
                    if (resData.status == 'success') {
                        resData.t.forEach(function (item) {
                            if (item.adType == '0') {
                                item.adType = '普通广告'
                            } else if (item.adType == '1') {
                                item.adType = 'WEB广告'
                            }
                            item.status = item.status == '1';
                        });
                        ad.tableData = resData.t;
                        ad.totalPage = resData.page.totalPage;
                        ad.totalCount = resData.page.totalResult;
                    }
                });
            },
            filterAdType: function (value, row) {
                alert(row.status);
                row.status = (value == 1);
            },
            changeAdType: function (index, row) {
                var url = "${basePath}bank/ad/change";
                var options = {
                    'adId': row.adId,
                    'status': row.status ? '1' : '0'
                };
                sendService(url, options, function (resData) {
                    if (resData.status == 'success') {
                        ad.$message.success("操作成功");
                    } else {
                        ad.$message.error("操作失败！请联系管理员！");
                    }
                });
                return true;
            },
            edit: function (index, row) {
                if (index != undefined) {
                    var url = "${basePath}bank/ad/editQuery";
                    var options = {
                        'adId': row.adId,
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            if (resData.t.adId != '') {
                                ad.form.adId = resData.t.adId;
                                ad.form.adName = resData.t.adName;
                                ad.form.adType = resData.t.adType;
                                ad.form.adLink = resData.t.adLink;
                                ad.form.adFilePath = resData.t.adFilePath;
                                ad.form.status = resData.t.status == '1';
                                ad.form.adDesc = resData.t.adDesc;
                                ad.form.fileList = [{
                                    name: resData.t.adFilePath,
                                    url: '${basePath}uploadFiles/uploadImgs/' + resData.t.adFilePath
                                }];
                            }
                            ad.dialogTitle = "编辑广告";
                            ad.dialogFormVisible = true;
                        } else {
                            ad.$message.error("操作失败！请联系管理员！");
                        }
                    });
                } else {
                    ad.form.adId = "";
                    ad.form.adName = "";
                    ad.form.adLink = '';
                    ad.form.adFilePath = '';
                    ad.form.status = true;
                    ad.form.adDesc = '';
                    ad.dialogTitle = "新增广告";
                    ad.dialogFormVisible = true;
                    ad.form.fileList = [];
                }
            },
            del: function (index, row) {
                ad.$confirm('此操作将永久删除该广告信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var url = "${basePath}bank/ad/del";
                    var options = {
                        'adId': row.adId,
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            ad.$message.success(resData.msg);
                            ad.goPage("/bank/ad")
                        } else {
                            ad.$message.error(resData.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            upScuccess: function (response, file, fileList) {
                ad.form.adFilePath = response;
            },
            handleRemove: function (file, fileList) {
                var url = "${basePath}bank/ad/removeImg";
                var option = {
                    'fileName': ad.form.adFilePath
                };
                sendService(url, option, function (resData) {
                    if (resData.status == 'success') {
                        ad.form.adFilePath = "";
                    }
                });
            },
            handleRowHandle: function (row,event,column) {
                if(column.label == '操作' || column.label == '状态'){
                    return;
                }
                ad.dialogInfoVisible = true;
                ad.bean = row;
                //ad.bean.status = ad.bean.status?'启用':'停用';
                if(ad.bean.createDate && ad.bean.createDate !='')
                    ad.bean.createDate = new Date(ad.bean.createDate).toLocaleDateString();
                if(ad.bean.updateDate && ad.bean.updateDate !='')
                    ad.bean.updateDate = new Date(ad.bean.updateDate).toLocaleDateString();
            },
            goPage: function (url) {
                $(".main-right").empty();
                $(".main-right").load('${basePath}' + url);
            }
        },
        created: function () {
            var url = '${basePath}bank/ad/getAdlist';
            var options = {currentPage: 1};
            var loading;
            sendService(url, options, function (resData) {
                if (resData.status == 'success') {
                    resData.t.forEach(function (item) {
                        if (item.adType == '0') {
                            item.adType = '普通广告'
                        } else if (item.adType == '1') {
                            item.adType = 'WEB广告'
                        }
                        item.status = item.status == '1';
                    });
                    ad.tableData = resData.t;
                    ad.totalPage = resData.page.totalPage;
                    ad.totalCount = resData.page.totalResult;

                } else {
                    alert(resData);
                }
            });
        }
    });
</script>
<!--<![endif]-->
<style scoped>
    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    /*table按钮样式调整开始*/
    .el-button--mini, .el-button--mini.is-round{
        padding: 4px 10px;
    }
    .userManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .userManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .userManageBox .resetBtn{
        color: #02dda7;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .resetBtn:hover{
        color: #fff;
        background-color: #02dda7;
        border-color: #02dda7;
    }
    .userManageBox .el-button{
        margin-left: 0;
    }
    /*table按钮样式调整结束*/
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    /*.el-table td, .el-table th.is-leaf{*/
    /*border: none;*/
    /*}*/
    .el-table::before{
        height: 0;
    }
    .addUserBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    .add-template-form > div{
        margin-left: 45px;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    #menuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }
    .edit-template-form > div{
        margin-left: 45px;
    }
    /*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
    /*content: '';*/
    /*}*/
    #addMenuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }


    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }

    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #aaa;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        padding-left: 80px
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }
    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #aaa;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .errorBox{
        color: #fa5555;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .errorBox2333{
        color: #fa5555;
        font-size: 12px;
    }
    /*#selManage label{*/
    /*position: relative;*/
    /*}*/
    #selManage label:before{
        content: '*';
        color: #fa5555;
        margin-right: 4px;

    }


    /*详情页样式*/



</style>

